<template>
  <div class="backView">

    <div @click="pickTest(el)" class="itemView" v-for="el in dataList">
      <div class="leftView">
        <img class="iconView" src="../../../../../../static/img/course_quiz.png"/>
        <div class="lineView"></div>
        <p class="titleLabel ellipsis2">
          {{ el.title }}
        </p>

      </div>
      <div @click.stop="mistakeQuestionTest(el)" class="el-button-customer" v-show="el.examType===4">错题库</div>

      <div class="not_pass" v-show="el.passStatus">
        <span style="color: #005BAB" v-if="el.passStatus == 1">通过</span>
        <span style="color: #FF4F35" v-else>未通过</span>
      </div>
    </div>

  </div>
</template>

<script>
import course_api from '@/repo/api/course_api';

export default {
  props: ['dataList', 'courseDetail'],
  data() {
    return {
      data: '',
      courseId: this.$route.params.courseId,
      testData: {}
    };
  },

  created() {
    window['courseTestPrePlayNativeCallback'] = (jsonStr = '{}') => this.courseTestPrePlayNativeCallback(jsonStr);
    window['courseTestPayDoneCallback'] = (jsonStr = '{}') => this.courseTestPayDoneCallback(jsonStr);
  },

  methods: {
    pickTest(el) {
      this.testData = el;
      this.$store.commit('courseInfo/SET_COURSE_TITLE', this.courseDetail.title);
      if (!this.$store.getters['memberInfo/isOpen']) return this.$buyMemberPopup();

      if (!el.examType || el.examType === 2) {
        return course_api.getExamLimitBySubjectId(this.courseId).then((result) => {
          if (result.responseData.examLimt != 1) return;
          this.requestNativeMethods('onJsPreparePlayingEUVideo', 'courseTestPrePlayNativeCallback');
        }).catch((error => console.log('error', error)));
      }

      if ([3, 4].includes(el.examType)) return this.$_router.push(`/exam/normal/${ el.examId }/${ this.$route.params.courseId }/1`);
    },
    mistakeQuestionTest(el) {
      if (!this.$store.getters['memberInfo/isOpen']) return this.$buyMemberPopup();
      this.$_router.push(`/exam/error/${ el.examId }/${ this.$route.params.courseId }`);
    },

    toTestDetail(el) {
      if (!el.examType) return this.$_router.push(`/test/${ el.id }/${ this.$route.params.courseId }`);
      if (el.examType === 2) return this.$_router.push(`/exam/normal/${ el.examId }/${ this.$route.params.courseId }/1`);
      if ([3, 4].includes(el.examType)) this.$_router.push(`/exam/normal/${ el.examId }/${ this.$route.params.courseId }/1`);
    },

    /**
     * 原生APP客户端回调
     * @param jsonStr code 0 已扣 1 未扣
     */
    courseTestPrePlayNativeCallback(jsonStr) {
      let { code = '1', info } = JSON.parse(jsonStr);
      this.hftIsBuy = code * 1 === 0;
      if (code * 1 === 0) return this.toTestDetail(this.testData);
      this.requestNativeMethods('onJsConfirmPlayingEUVideo', 'courseTestPayDoneCallback');
    },

    /**
     * 扣豆完成回调
     * @param jsonStr
     */
    courseTestPayDoneCallback(jsonStr) {
      let { code, info } = JSON.parse(jsonStr);
      if (code * 1 === 1) this.toTestDetail(this.testData);
    },

    /**
     * type 1:视频 2:音频  3:文档 4:测试
     * @param {string} execFn 执行方法
     * @param {string | undefined} callback 回调函数
     */
    requestNativeMethods(execFn, callback = undefined) {
      if (!execFn) throw new Error('execFn or callback can not be null');
      if (!window.hasOwnProperty('zshft')) return;
      const { title: subjectName } = this.courseDetail;
      const { id: mediaId, title: mediaName } = this.testData;
      let params = {
        subjectId: this.courseId,
        subjectName,
        mediaId,
        type: 4,
        mediaName
      };
      window.zshft[execFn](JSON.stringify(params), callback);
    },
  }
};
</script>

<style scoped>
.backView {
  padding: 16px 20px 16px 20px;
}

.itemView {
  display: flex;
  background: #F7F7F7;
  justify-content: space-between;
  border-radius: 4px;
  align-items: center;
  height: 72px;
  width: 100%;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 12px;
  box-sizing: border-box;
}

.leftView {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.iconView {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.lineView {
  width: 1px;
  height: 40px;
  margin-left: 18px;
  background-color: white;
}

.titleLabel {
  margin: 0 24px 0 16px;
  font-size: 14px;
  color: #333333;
}

.not_pass {
  font-size: 14px;
}


</style>


